<script setup lang="ts">
import { ref, computed, reactive, onMounted } from 'vue';
import { ApiUserOut, UserApi } from '@/api-services';
import { feature, getAPI } from '@/axios-utils';
import { queryDone } from '@/utils/api';
import { $t } from '@/locales';

// 用户类型枚举
// enum UserType {
//   Normal = 0,
//   Admin = 100,
//   SuperAdmin = 101,
//   SystemMaintainer = 102
// }

// 用户信息接口
// interface UserInfo {
//   account: string;
//   userType: UserType;
//   lastLoginTime: string;
//   lastLoginIp: string;
//   avatarUrl: string;
// }
type UserInfo = ApiUserOut & {
  avatarUrl: string
};
// 模拟用户数据
const userInfo = reactive<UserInfo>({
  avatarUrl: ''
});

// 计算属性：将用户类型枚举转换为可读文本
const userTypeText = computed(() => {
  switch (userInfo.userType) {
    case 0:
      return '普通用户';
    case 100:
      return '管理员';
    case 101:
      return '超级管理员';
    case 102:
      return '系统维护';
    default:
      return '未知类型';
  }
});


//获取用户信息
const getUserInfo = async () => {
  const [err, res] = await feature(getAPI(UserApi).apiUserGetlogininfoGet());
  queryDone(err, async () => {
    if (res?.data.data) {
      const userData = res.data.data;
      userInfo.account = userData.account;
      userInfo.userType = userData.userType;
      userInfo.lastLoginTime = userData.lastLoginTime;
      userInfo.lastLoginIp = userData.lastLoginIp;
      // userInfo = res.data.data;
    } else {
      // 失败
      window.$message?.error($t('common.failed'));
    }
  });
};

onMounted(() => {
  getUserInfo();
});
</script>

<template>
  <div class="profile-container">
    <div class="page-header">
      <span class="page-title">
        个人中心
      </span>
      <span class="page-subtitle">
        管理您的账户信息
      </span>
    </div>
    <div class="content-wrapper">
      <el-card class="profile-card">
        <!-- 头像区域 -->
        <div class="avatar-section">
          <NAvatar :username="userInfo.account" class="avatar"></NAvatar>
        </div>

        <!-- 个人信息区域 -->
        <div class="info-section">
          <el-descriptions title="个人信息" bordered>
            <el-descriptions-item label="用户名" :span="3">
              <el-tag type="primary">{{ userInfo.account }}</el-tag>
            </el-descriptions-item>

            <el-descriptions-item label="账户类型" :span="3">
              <el-tag :type="userInfo.userType && userInfo.userType > 100 ? 'danger' : 'success'">
                {{ userTypeText }}
              </el-tag>
            </el-descriptions-item>

            <el-descriptions-item label="最后登录时间" :span="3">
              {{ userInfo.lastLoginTime }}
            </el-descriptions-item>

            <el-descriptions-item label="最后登录IP" :span="3">
              <el-tag color="geekblue">{{ userInfo.lastLoginIp }}</el-tag>
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </el-card>
    </div>
  </div>
</template>

<style scoped>
.profile-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.content-wrapper {
  margin-top: 24px;
}

.profile-card {
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  display: flex;
  padding: 24px;
}

.avatar-section {
  flex: 0 0 240px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  border-right: 1px solid #f0f0f0;
}

.avatar {
  margin-bottom: 20px;
  background-color: #1890ff;
}

.upload-btn {
  margin-top: 10px;
}

.upload-tip {
  margin-top: 8px;
  color: #999;
  font-size: 12px;
  text-align: center;
}

.info-section {
  flex: 1;
  padding: 0 24px;
}


.page-header {
  height: 40px;
  padding: 24px;
}

.page-title {
  font-size: 24px;
  /* 字体加粗 */
  font-weight: bold;
}

.page-subtitle {
  color: rgba(0, 0, 0, 0.45);
}

/* 响应式布局 */
@media (max-width: 768px) {
  .profile-card {
    flex-direction: column;
  }

  .avatar-section {
    border-right: none;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 24px;
    margin-bottom: 24px;
  }
}
</style>
